<template>
  <v-chart :option="option" autoresize style="height: 350px; width: 100%;" />
</template>

<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps<{
  data: { name: string; value: number }[]
}>()

const colors = [
  '#60a5fa', '#34d399', '#fbbf24', '#f87171', '#a78bfa', '#f472b6',
  '#fdba74', '#7dd3fc', '#bbf7d0', '#fca5a5', '#d1fae5', '#fbcfe8'
]

const option = computed(() => ({
  grid: {
    left: 40,
    right: 20,
    bottom: 40,
    top: 30,
    containLabel: true,
    backgroundColor: '#fafbfc'
  },
  tooltip: {
    trigger: 'axis',
    backgroundColor: '#fff',
    borderColor: '#e5e7eb',
    borderWidth: 1,
    textStyle: { color: '#1e293b' }
  },
  xAxis: {
    type: 'category',
    data: props.data.map(d => d.name),
    axisLabel: {
      interval: 0,
      rotate: 24,
      color: '#64748b',
      fontWeight: 500,
      fontSize: 14,
    },
    axisLine: { lineStyle: { color: '#e5e7eb' } },
    axisTick: { show: false },
  },
  yAxis: {
    type: 'value',
    splitLine: { lineStyle: { color: '#f1f5f9', type: 'dashed' } },
    axisLabel: { color: '#94a3b8', fontWeight: 500 },
    axisLine: { show: false },
    axisTick: { show: false },
  },
  series: [
    {
      type: 'bar',
      data: props.data.map((d, i) => ({
        value: d.value,
        itemStyle: {
          color: colors[i % colors.length],
          borderRadius: [8, 8, 0, 0],
          shadowColor: colors[i % colors.length] + '55',
          shadowBlur: 6,
        }
      })),
      barMaxWidth: 36,
      label: {
        show: true,
        position: 'top',
        color: '#0ea5e9',
        fontWeight: 'bold',
        fontSize: 14,
        formatter: '{c}'
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 15,
          shadowColor: '#33333344'
        }
      },
      z: 2
    }
  ],
  animationDuration: 600
}))
</script>
